import React from 'react';
import { AntdBaseTable } from './TBaseTable';
import { useTablePipeline } from 'ali-react-table';
import styles from './index.less';
import _ from 'lodash';

const BaseTable = (props: any) => {
  const { tableData, tableHeader = [], style } = props;
  // 处理表头
  const getColumns = (columsValue: any) => {
    const columns: any[] = [];
    columns.push({
      name: '',
      align: 'center',
      code: 'title',
      width: 120,
      lock: true,
    });
    columsValue.forEach((item: any) => {
      columns.push({
        name: item.name,
        align: 'center',
        code: item.field,
        width: 90,
        render: (value: any) => {
          return value || '-';
        },
      });
    });
    return columns;
  };
  const dataTable = _.cloneDeep(tableData);
  const pipeline = useTablePipeline({ components: {} }).input({
    dataSource: dataTable,
    columns: getColumns(tableHeader),
  });

  return (
    <div className={styles.outside} style={style}>
      <AntdBaseTable
        className={['bordered', `${styles.custor_2}`].join(' ')}
        style={{
          // '--header-bgcolor': '#383C3E',
          // '--header-color': 'white',
          '--row-height': '21px',
          '--header-row-height': '28px',
          '--bgcolor': 'var(--bg-main)',
          // '--color': '#D3D4D4',
          '--cell-padding': '3px 0 4px 0',
          '--hover-bgcolor': 'var(--bg-main)',
        }}
        {...pipeline.getProps()}
        useVirtual={{ horizontal: true, vertical: true, header: false }}
      />
    </div>
  );
};

export default BaseTable;
